<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 节点</title>
    <script>
        /* 使用 Js 添加或者删除节点 */
        function addOneNode() {

            var para = document.createElement("p");
            var node = document.createTextNode("这是新段落P3");
            para.id = "p3";   //或者div.setAttribute("id","mydiv");

            para.appendChild(node);

            var element = document.getElementById("div1")
            element.appendChild(para)
        }

        function removeOneNode() {

            // 移除某元素a 需要先获取元素a 的父元素然后 移除操作 
            // 如果能够在不引用父元素的情况下删除某个元素，就太好了。
            // 不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
            // 这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

            // var child=document.getElementById("p1");
            // child.parentNode.removeChild(child);
            var parent=document.getElementById("div1");
            var child=document.getElementById("p3");
            parent.removeChild(child);
        }
        
        function removeTwoNode(){
            var child = document.getElementById("p3");
            child.parentNode.removeChild(child);   // 这两种都是可以的
        }

    </script>
</head>
<body>
    <div id="div1">
        <p id="p1">这是一个段落</p>
        <p id="p2">这是另一个段落</p>
    </div>
    <button onclick="addOneNode()">添加一个节点</button>
    <button onclick="removeOneNode()">删除一个节点</button>
    <button onclick="removeOneNode()">另一种删除子节点的方法</button>
</body>
</html>